<template>
  <view class="container">
    <!-- 资料卡片 -->
    <view class="profile-card">
      <!-- 头像 & 修改头像 -->
      <view class="avatar-section">
        <image class="avatar" mode="aspectFill" :src="avatarUrl" />
        <view class="change-avatar-btn" @click="handleChangeAvatar" hover-class="none" hover-stop-propagation="false">
          修改头像
        </view>
      </view>

      <!-- 信息列表 -->
      <u-cell-group>
        <!-- 用户名 - 使用 u-input 直接在 cell 中编辑 -->
        <u-cell title="用户名" is-link="false">
          <u-input :value="userInfo.userName" placeholder="请输入用户名" @input="val => userInfo.userName = val" />
        </u-cell>

        <!-- 性别 -->
        <u-cell title="性别" :value="userInfo.gender" is-link right-icon="arrow-right" @click="showGenderPopup = true" />

        <!-- 手机号码 - 点击后弹出微信授权 -->
        <u-cell title="手机号码" :value="userInfo.phone" is-link right-icon="arrow-right" @click="handleGetPhoneNumber" />

        <!-- 球龄（首次打球时间） -->
        <u-cell title="球龄（首次打球时间）" :value="userInfo.firstPlayTime" is-link right-icon="arrow-right"
          @click="showDatePopup = true" />

        <!-- 个人介绍 -->
        <u-cell title="个人介绍" :value="userInfo.bio ? userInfo.bio : '未填写'" is-link right-icon="arrow-right"
          @click="showBioPopup = true" />
      </u-cell-group>
    </view>

    <!-- 底部保存按钮 -->
    <view class="save-button-wrap">
      <u-button type="primary" @click="handleSave">
        保存
      </u-button>
    </view>

    <!-- 1. 个人介绍弹窗（底部弹起） -->
    <u-popup mode="bottom" :show="showBioPopup" @close="showBioPopup = false">
      <view class="popup-container">
        <view class="popup-header">
          <text @click="onCancelBio" class="cancel-text">取消</text>
          <text class="popup-title">个人介绍</text>
          <text @click="onConfirmBio" class="confirm-text">确定</text>
        </view>
        <textarea class="bio-textarea" v-model="tempBio" placeholder="请填写个人介绍" :maxlength="200" />
      </view>
    </u-popup>

    <!-- 2. 球龄时间选择弹窗 -->
    <u-datetime-picker ref="datetimePicker" :show="showDatePopup" @confirm="onConfirmDate" @cancel="onCancelDate"
      v-model="tempDateValue" mode="datetime" :formatter="formatter"></u-datetime-picker>

    <!-- 3. 性别选择弹窗 -->
    <u-popup mode="bottom" :show="showGenderPopup" @close="showGenderPopup = false">
      <view class="popup-container">
        <view class="popup-header">
          <text @click="onCancelGender" class="cancel-text">取消</text>
          <text class="popup-title">性别</text>
          <text @click="onConfirmGender" class="confirm-text">确认</text>
        </view>

        <view class="gender-list">
          <!-- 简单用两个view当作选项 -->
          <view :class="['gender-option', tempGender === '男' ? 'selected' : '']" @click="tempGender = '男'">
            男
          </view>
          <view :class="['gender-option', tempGender === '女' ? 'selected' : '']" @click="tempGender = '女'">
            女
          </view>
        </view>
      </view>
    </u-popup>

    <!-- 4. 微信授权手机号弹窗（简单示例） 
         如果要用小程序的 button open-type="getPhoneNumber" 需在组件内
         这里示例用一个u-popup做提示，然后在内部放一个button来触发授权
    -->
    <u-popup mode="center" :show="showPhonePopup" @close="showPhonePopup = false">
      <view class="phone-popup">
        <text class="phone-title">golfroom高球房间 申请</text>
        <text class="phone-subtitle">你的手机号码</text>
        <text class="phone-display">{{ userInfo.phone ? userInfo.phone : '微信绑定手机号' }}</text>
        <view class="phone-action">
          <button class="wx-btn-cancel" type="default" @click="showPhonePopup = false">
            取消
          </button>
          <button open-type="getPhoneNumber" class="wx-btn-confirm" type="primary" @getphonenumber="getPhoneNumber">
            允许
          </button>
        </view>
      </view>
    </u-popup>

  </view>
</template>

<script>
export default {
  data() {
    return {
      // 头像路径：可换成实际网络图片或本地资源
      avatarUrl: '/static/images/avatar.jpg',
      userInfo: {
        userName: '大海',
        gender: '男',
        phone: '18678611903',
        firstPlayTime: '2024年01月', // 字符串即可
        bio: ''
      },

      // 弹窗控制
      showBioPopup: false,
      showDatePopup: false,
      showGenderPopup: false,
      showPhonePopup: false,

      // 临时变量（供弹窗中编辑/选择用）
      tempBio: '',
      tempDate: '', // 存储 YYYY-MM
      tempGender: '',
      tempDateValue: '',
    };
  },
  methods: {
    /* ========== 修改头像 ========== */
    handleChangeAvatar() {
      // 调用 uni 选择图片API，获取相册照片
      uni.chooseImage({
        count: 1,
        sizeType: ['compressed'], // 可以自行限制大小类型
        sourceType: ['album'],
        success: res => {
          const tempFilePath = res.tempFilePaths[0];
          // 你可以直接赋值展示；或先上传服务器，再获取服务器返回的图片URL
          this.avatarUrl = tempFilePath;
        },
        fail: err => {
          console.log('选择图片失败:', err);
        }
      });
    },

    /* ========== 用户名 - 直接用 u-input v-model 绑定即可 ========== */
    // 这里无需额外方法，如果需要提交到服务器，可以在 handleSave 时把 userInfo.userName 上传

    /* ========== 个人介绍 ========== */
    editBio() {
      // 打开弹窗前，把现有的 bio 赋值给临时变量
      this.tempBio = this.userInfo.bio;
      this.showBioPopup = true;
    },
    onCancelBio() {
      this.showBioPopup = false;
    },
    onConfirmBio() {
      // 把临时变量赋值回去
      this.userInfo.bio = this.tempBio;
      this.showBioPopup = false;
    },

    /* ========== 球龄（日期） ========== */
    editFirstPlayTime() {
      // 把现有的 firstPlayTime 转成 YYYY-MM 格式，赋值给 tempDate
      // 简易处理：如果 userInfo.firstPlayTime = '2024年01月'，需要解析一下
      const dateStr = this.userInfo.firstPlayTime.replace('年', '-').replace('月', '');
      // dateStr 结果类似 '2024-01'
      this.tempDate = dateStr;
      this.showDatePopup = true;
    },
    onChangeDate(e) {
      // e.detail.value 例如 '2025-06'
      this.tempDate = e.detail.value;
      if (this.tempDate) {
        const [year, month] = this.tempDate.split('-');
        this.userInfo.firstPlayTime = `${year}年${month}月`;
      }
      // 直接选完后关闭弹窗
      this.showDatePopup = false;
    },
    onCancelDate() {
      this.showDatePopup = false;
    },
    onConfirmDate(e) {
      console.log('-----e--', e)
      // e 可能是字符串 '2023-02-01'，也可能是 Date 对象，详见uView文档
      let dateStr = '';
      if (typeof e === 'string') {
        dateStr = e; // '2023-02-01'
      } else if (e instanceof Date) {
        const year = e.getFullYear();
        const month = (e.getMonth() + 1).toString().padStart(2, '0');
        dateStr = `${year}-${month}-01`;
      }

      if (dateStr) {
        // 截取年、月，拼回 'XXXX年XX月'
        const [year, month] = dateStr.split('-');
        this.userInfo.firstPlayTime = `${year}年${month}月`;
      }
      this.showDatePopup = false;
    },
    // 辅助格式化方法
    formatDate(dateStr) {
      if (!dateStr) return '请选择日期';
      const [year, month] = dateStr.split('-');
      return `${year}年${month}月`;
    },

    /* ========== 性别选择 ========== */
    editGender() {
      // 打开弹窗前保存现有性别到临时变量
      this.tempGender = this.userInfo.gender;
      this.showGenderPopup = true;
    },
    onCancelGender() {
      this.showGenderPopup = false;
    },
    onConfirmGender() {
      this.userInfo.gender = this.tempGender;
      this.showGenderPopup = false;
    },

    /* ========== 微信授权获取手机号 ========== */
    handleGetPhoneNumber() {
      // 可根据实际情况决定是否直接调用微信授权按钮
      // 这里演示先弹出一个自定义弹窗 showPhonePopup
      this.showPhonePopup = true;
    },
    getPhoneNumber(e) {
      console.log('微信授权获取手机号事件返回：', e);
      if (e.detail.errMsg === 'getPhoneNumber:ok') {
        // 调用后端解密 e.detail.encryptedData 和 e.detail.iv
        // 解密成功后，更新 userInfo.phone
        // 这里仅示例：
        this.userInfo.phone = '186****1903';
        uni.showToast({
          title: '授权成功',
          icon: 'success'
        });
      } else {
        uni.showToast({
          title: '用户拒绝授权',
          icon: 'none'
        });
      }
      this.showPhonePopup = false;
    },

    /* ========== 保存 ========== */
    handleSave() {
      // 执行保存操作（可上传到后端）
      console.log('最终 userInfo:', this.userInfo);

      uni.showToast({
        title: '已保存',
        icon: 'success'
      });
    }
  }
};
</script>

<style scoped>
.container {
  display: flex;
  flex-direction: column;
  background-color: #f6f6f6;
  height: 100%;
}

.profile-card {
  margin-top: 10rpx;
  background-color: #fff;
  padding: 20rpx;
}

.avatar-section {
  display: flex;
  align-items: center;
  margin-bottom: 20rpx;
  justify-content: space-between;
}

.avatar {
  width: 120rpx;
  height: 120rpx;
  border-radius: 50%;
  margin-right: 20rpx;
}

.change-avatar-btn {
  padding: 0 10rpx;
  border: 1rpx solid gray;
  color: gray;
}

.save-button-wrap {
  margin-top: 30rpx;
  padding: 0 20rpx;
}

/* -- 弹窗通用样式 -- */
.popup-container {
  width: 100%;
  background-color: #fff;
  border-radius: 20rpx 20rpx 0 0;
  padding-bottom: 20rpx;
}

/* 头部 */
.popup-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20rpx;
  border-bottom: 1rpx solid #eee;
}

.cancel-text {
  color: #999;
}

.confirm-text {
  color: #07c160;
  /* uView 主题色 */
}

.popup-title {
  font-weight: bold;
  color: #333;
}

/* 个人介绍的文本域 */
.bio-textarea {
  width: 100%;
  height: 200rpx;
  background-color: #f6f6f6;
  border: none;
  outline: none;
  margin-top: 10rpx;
  padding: 20rpx;
  font-size: 14px;
  line-height: 20rpx;
  color: #333;
}

/* 日期选择区 */
.picker-view {
  height: 300rpx;
  line-height: 300rpx;
  text-align: center;
  color: #333;
  background-color: #f6f6f6;
  margin: 20rpx;
  border-radius: 10rpx;
}

/* 性别 */
.gender-list {
  display: flex;
  flex-direction: column;
  padding: 20rpx;
}

.gender-option {
  padding: 20rpx;
  text-align: center;
  border-bottom: 1rpx solid #eee;
  color: #333;
}

.gender-option.selected {
  color: #07c160;
  font-weight: bold;
}

/* 微信授权手机号 */
.phone-popup {
  width: 80%;
  margin: 0 auto;
  background-color: #fff;
  border-radius: 10rpx;
  padding: 20rpx;
  text-align: center;
}

.phone-title {
  font-weight: bold;
  margin-bottom: 10rpx;
}

.phone-subtitle {
  color: #666;
  margin-bottom: 10rpx;
}

.phone-display {
  font-size: 18px;
  margin-bottom: 20rpx;
}

.phone-action {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}

.wx-btn-cancel,
.wx-btn-confirm {
  width: 40%;
}
</style>